@tailwind base;
@tailwind components;
@tailwind utilities;

/* 自定义样式 */
@layer components {
  .blog-container {
    @apply w-full max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8;
  }
  
  .custom-btn-primary {
    @apply btn btn-primary;
  }
  
  .custom-btn-secondary {
    @apply btn btn-secondary;
  }
  
  .card-hover {
    @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
  }

  /* 美化动效 */
  .fade-in {
    @apply opacity-0 transform translate-y-4;
    animation: fadeIn 0.8s ease-out forwards;
  }

  .hover-lift {
    @apply transition-all duration-300;
    transform: translateY(0);
  }

  .hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
  }

  .card-grid {
    @apply grid gap-6;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }

  .post-card {
    @apply bg-base-100 rounded-lg overflow-hidden border border-base-200 transition-all duration-300;
  }

  .post-card:hover {
    @apply shadow-xl border-primary border-opacity-50;
    transform: translateY(-5px);
  }
}

/* 动画定义 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#app {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  font-weight: normal;
}

a {
  text-decoration: none;
  transition: all 0.3s ease;
}

@media (hover: hover) {
  a:hover {
    color: hsl(var(--p));
  }
}

/* 移除固定的grid布局，让页面完全响应式 */
@media (min-width: 1024px) {
  body {
    display: block;
  }

  #app {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 0;
  }
}
